{% extends 'base.html' %}
{% load static %}
{% block title %}个人中心{% endblock %}
{% block content_for_personal_center %}

    <link rel="stylesheet" href="{% static 'css/personalCenter.css' %}">
    <div id="personalContent">
        {% comment %}功能选择框{% endcomment %}
        <div id="personalContent-le">
            <ul>
            <li><span class="iconfont"
                 style="font-size: 18px;">&#xe600;</span> <a href="{% url 'app:index' %}">回到首页</a>
                </li>

                <li class="choiceTable" style=" background-color: rgba(255, 255, 255, 0.2);"><span class="iconfont"
                 style="font-size: 18px;">&#xe958;</span>&nbsp;个人简介
                </li>
                <li class="choiceTable"><span class="iconfont">&#xe624;</span>&nbsp;我的博客</li>
                <li class="choiceTable"><span class="iconfont">&#xe620;</span>&nbsp;收藏中心</li>

                {% if isManager %}

                    {% if userId == '1' %}
                        <li class="choiceTable"><span class="iconfont">&#xe705;</span>&nbsp;后台管理</li>

                    {% endif %}

                {% else %}

                {% endif %}
                <li class="choiceTable" style="position: relative;"><span class="iconfont">&#xe639;</span>&nbsp;通&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;知

                    {% if unReadNum %}
                        <span id="unReadNum"
                              style="text-align: center;line-height: 20px;font-size: 14px;color: #8fd19e;top:20px;position: absolute;background-color: red;width: 20px;height: 20px;border-radius: 50%;">{{ unReadNum }}</span>

                    {% endif %}

                </li>
            <li><span class="iconfont"
                 style="font-size: 18px;">&#xe652;</span> <a href="{% url 'app:logout' userId=userId %}">退出登录</a>
                </li>
                <li class="choiceTable"><span class="iconfont">&#xe62b;</span>&nbsp;更&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;多
                </li>

            </ul>

        </div>

        {% comment %}功能选择框end{% endcomment %}

        {% comment %}内容框{% endcomment %}
        <div id="personalContent-ri">


            {% comment %}个人资料{% endcomment %}
            <div id="personalDesc" class="functionDiv">

                <img id="personalAvatar" src="{% url 'app:index' %}{{ user.avatar }}">
                {% if user.is_superuser %}
                    <span id="degree"><span class="iconfont normaluser"
                                            style="  font-size: 12px;">&#xe68a;</span>管理员</span>
                {% else %}
                    <span id="degree"><span class="iconfont superuser"
                                            style="  font-size: 12px;">&#xe60f;</span>普通用户</span>

                {% endif %}

                <div id="degreeTip">
                    普通用户:能对博客进行收藏
                    管理员:能进行发布和编辑博客 (<a href="#" style="color: #009688!important;" id="applyManage"
                                       class="{{ isManager }}">申请为管理员</a>)
                </div>

                {% comment %}鼠标经过显示提示框{% endcomment %}
                <script>
                    let degree = document.getElementById('degree');
                    let degreeTip = document.getElementById('degreeTip');
                    degree.onmouseover = function () {
                        degreeTip.style.display = 'block';
                    }
                    degreeTip.onmouseover = function () {
                        degreeTip.style.display = 'block';
                    }
                    degreeTip.onmouseleave = function () {
                        setTimeout(function () {
                            degreeTip.style.display = 'none';
                        }, 1000);

                    }


                </script>


                <form action="{% url 'app:modifyAvatar' %}" method="post" enctype="multipart/form-data"
                      id="modifyAvatar">
                    <button>修改头像</button>
                    <input type="file" name="imgfile" onchange="read()" id="avatarInput" accept=".png,.jpg,.gif">

                </form>

                {% comment %}显示上传的图片{% endcomment %}
                <script>
                    function read() {
                        var imgData = null; //上传的头像数据
                        var avatarFile = document.getElementById('avatarInput');
                        let imgMax = 1024 * 1024 * 2;
                        let nowImgSize = avatarFile.files[0].size;
                        if (nowImgSize > imgMax) {
                            popMsg(`<div id="msg-top">提示
            <span class="iconfont close" id="closeMsg">&#xe61a;</span>
        </div><div id="msg-bottom">头像大小不能超过2M!</div>`);

                            showAvatar.src = '{% url 'app:index' %}{{ user.avatar }}';

                        } else {
                            let showAvatar = document.getElementById('personalAvatar'); //用于显示图片的img元素
                            for (var i = 0; i < avatarFile.files.length; i++) {
                                let reader = new FileReader();
                                var file1 = avatarFile.files[i];
                                reader.readAsDataURL(file1);
                                reader.onload = function (result) {
                                    //reader对象的result属性存储流读取的数据
                                    imgData = reader.result;
                                    showAvatar.src = `${imgData}`;
                                    {% comment %}图片上传到服务器{% endcomment %}
                                    setTimeout(function () {
                                        let isModify = confirm('是否保存修改?');
                                        if (isModify) {
                                            $ajax('POST', '{% url "app:modifyAvatar" %}', {
                                                    'imgData': imgData.replace(/\+/g, "%2B").replace('data:image/jpeg;base64,', ''),
                                                    'userId': "{{ userId }}"
                                                },
                                                function (msg) {
                                                    popMsg(`<div id="msg-top">提示
            <span class="iconfont close" id="closeMsg">&#xe61a;</span>
        </div><div id="msg-bottom">${JSON.parse(msg)['msg']}</div>`);
                                                }, function (msg) {
                                                    popMsg(`<div id="msg-top">提示
            <span class="iconfont close" id="closeMsg">&#xe61a;</span>
        </div><div id="msg-bottom">${JSON.parse(msg)['msg']}</div>`);
                                                }
                                            )
                                        } else {
                                            showAvatar.src = '{% url "app:index" %}{{ user.avatar }}';
                                        }

                                    }, 1000);


                                }
                            }
                        }


                    }


                </script>
                <div class="aaa"><span>昵称:</span> <input class="descMy" type="text" value="{{ user.username }}"
                                                         maxlength="20" required>

                    {% if isVistor %}
                        <span style="left: 400px!important;bottom: 10px;border: 1px solid #ffffff;height: 30px;width: 100px;line-height: 30px;"
                              id="bandMobile">绑定手机</span>
                    {% else %}
                        <span style="left: 400px!important;bottom: 10px;
                        border: 1px solid #ffffff;height: 30px;width: 100px;line-height: 30px;">已绑定手机</span>
                    {% endif %}



                    <script>

                        window.onload = function () {
                            var containerOfWhole = document.getElementsByClassName('container')[0];
                            let bandMobile = document.getElementById('bandMobile');
                            let applyManage = document.getElementById('applyManage');
                            let applyManage2 = document.getElementById('applyManage2');

                            {% comment %}绑定手机{% endcomment %}
                            if ('{{ isVistor }}') { //游客需要绑定手机
                                bandMobile.onclick = function () {
                                    popMsg(`<div id="msg-top">绑定手机
            <span class="iconfont close" id="closeMsg">&#xe61a;</span>
        </div><div id="msg-bottom">
            <div class="input_outer">
                <span class="iconfont">&#xe684;</span>
                <input class="text" id="telPhone" style="color: #FFFFFF !important" type="tel"placeholder="请输入手机号码">
            </div>

            <div class="input_outer">
                <span class="iconfont">&#xe619;</span>
                <input id="msgYzm" class="text" style="color: #FFFFFF !important" type="text" placeholder="请输入验证码">
            </div>
            <div class="input_outer" id="bandButton">

                绑&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;定

            </div>


        </div>`);

                                    let bandButton = document.getElementById('bandButton');

                                    let telPhone = document.getElementById('telPhone');
                                    telPhone.onkeyup = function () {
                                        let phoneNum = telPhone.value;
                                        if (phoneNum.length === 11) {
                                            if (!/^[1][345789][0-9]{9}$/.test(phoneNum)) {
                                                 popMsg(`<div id="msg-top">提示
            <span class="iconfont close" id="closeMsg">&#xe61a;</span>
        </div><div id="msg-bottom">请输入正确的电话号码!</div>`);

                                            } else {

                                                $ajax('post', '{% url "app:sendCode" %}', {

                                                        'tel': phoneNum
                                                    },
                                                    function (msg) {

                                                         popMsg(`<div id="msg-top">提示
            <span class="iconfont close" id="closeMsg">&#xe61a;</span>
        </div><div id="msg-bottom">${JSON.parse(msg)['msg']}</div>`);

                                                        bandButton.onclick = function () {
                                                            let msgYzm = document.getElementById('msgYzm');
                                                            $ajax('post', '{% url "app:bandMobile" %}',
                                                                {
                                                                    'tel': phoneNum,
                                                                    'userId':{{userId}},
                                                                    'yzm': msgYzm.value
                                                                },
                                                                function (msg) {
                                                                    popMsg(`<div id="msg-top">提示
            <span class="iconfont close" id="closeMsg">&#xe61a;</span>
        </div><div id="msg-bottom">${JSON.parse(msg)['msg']}</div>`);
                                                                    if (JSON.parse(msg)['msg'] === '绑定成功!') {
                                                                        history.go(0);//绑定成功后刷新当前页面
                                                                    }


                                                                }, function (msg) {
                                                                     popMsg(`<div id="msg-top">提示
            <span class="iconfont close" id="closeMsg">&#xe61a;</span>
        </div><div id="msg-bottom">${JSON.parse(msg)['msg']}</div>`);
                                                                }
                                                            )


                                                        }


                                                    }, function (msg) {
                                                         popMsg(`<div id="msg-top">提示
            <span class="iconfont close" id="closeMsg">&#xe61a;</span>
        </div><div id="msg-bottom">${JSON.parse(msg)['msg']}</div>`);
                                                    }
                                                )


                                            }
                                        }

                                    }


                                }
                            }

                            if ('{{ isManager }}' === 'False') {
                                applyManage2.onclick = function () {
                                    doApply();

                                }
                            }

                            {% comment %}申请为管理员{% endcomment %}

                            function doApply() {

                                if (applyManage.className === 'True') {

                                     popMsg(`<div id="msg-top">提示
            <span class="iconfont close" id="closeMsg">&#xe61a;</span>
        </div><div id="msg-bottom">您已是管理员,无需额外申请!</div>`);


                                } else {
                                    popMsg(`<div id="msg-top">申请为管理员
            <span class="iconfont close" id="closeMsg">&#xe61a;</span>

        </div><div id="msg-bottom">

            <textarea placeholder="请说明申请理由~" maxlength="200"></textarea>

  <div id='submitApply'>提交申请</div>
            </div></div>`);
                                    let submitApply = document.getElementById('submitApply');
                                    let reason = document.getElementById('msg-bottom').getElementsByTagName('textarea')[0];

                                    submitApply.onclick = function () {
                                        if (reason.value.length < 5) {


                                             popMsg(`<div id="msg-top">提示
            <span class="iconfont close" id="closeMsg">&#xe61a;</span>
        </div><div id="msg-bottom">理由要充分一点哦!</div>`);


                                        } else {
                                            $ajax('post', '{% url "app:applyManage" %}', {
                                                    'applyReason': reason.value,
                                                    'userId':{{userId}}
                                                },
                                                function (msg) {

                                                      popMsg(`<div id="msg-top">提示
            <span class="iconfont close" id="closeMsg">&#xe61a;</span>
        </div><div id="msg-bottom">${JSON.parse(msg)['msg']}</div>`);

                                                    let msgDiv = document.getElementById('msg');
                                                    containerOfWhole.removeChild(msgDiv);
                                                },
                                                function () {
                                                     popMsg(`<div id="msg-top">提示
            <span class="iconfont close" id="closeMsg">&#xe61a;</span>
        </div><div id="msg-bottom">请求失败!</div>`);

                                                }
                                            )
                                        }
                                    }
                                }
                            }

                            applyManage.onclick = function () {
                                doApply();
                            }

                            {% comment %}用户介绍{% endcomment %}
                            addDescTag();
                        }


                    </script>


                </div>
                <div class="aaa"><span>职业:</span> <input class="descMy" type="text" value='{{ user.job }}'
                                                         maxlength="20" required>
                </div>
                <span id="descTextareaTag">个人简介:</span>
                <textarea maxlength="300" class="descMy" placeholder="这个人很懒,ta什么都没写~"
                          id="descTextarea">{{ user.desc }}</textarea>

                {% comment %}修改个人资料{% endcomment %}
                <script>

                    let descMy = document.getElementsByClassName('descMy');
                    for (let i = 0; i < descMy.length; i++) {
                        descMy[i].name = i
                        descMy[i].onchange = function () {
                            let thisValue = descMy[i].value || descMy[i].innerHTML;
                            if (thisValue) {
                                if (confirm('个人资料有变动,是否保存修改?')) {
                                    $ajax('post', '{% url "app:modifyDesc" %}', {
                                            'userId':{{userId}},
                                            'name': thisValue,
                                            'job': thisValue,
                                            'desc': thisValue,
                                            'whichId': this.name
                                        },
                                        function (msg) {

                                                  popMsg(`<div id="msg-top">提示
            <span class="iconfont close" id="closeMsg">&#xe61a;</span>
        </div><div id="msg-bottom">${JSON.parse(msg)['msg']}</div>`);

                                        },
                                        function (msg) {
                                           popMsg(`<div id="msg-top">提示
            <span class="iconfont close" id="closeMsg">&#xe61a;</span>
        </div><div id="msg-bottom">${JSON.parse(msg)['msg']}</div>`);
                                        }
                                    )


                                }
                            }


                        }

                    }


                </script>


            </div>
            {% comment %}个人资料end{% endcomment %}
            {% comment %}我的博客{% endcomment %}
            <div id="myBlogDiv" class="functionDiv">

                {% if isManager %}
                    {% comment %}博客搜索框{% endcomment %}
                    <div id="blogSearch">
                        <input type="text" placeholder="请输入关键字" style="color: #ffffff;width: 300px">
                        <span class="iconfont">&#xe679;</span>
                    </div>
                    {% comment %}博客搜索框end{% endcomment %}

                    {% comment %}博客表格{% endcomment %}
                    <div id="blogTable">
                        <div id="blogTable-top">
                            <table border="2" cellspacing="0" style="width: 80%!important;">
                                <caption>我的博客({{ allNum }}篇)</caption>
                                <thead>
                                <tr style="width: 854px!important;height: 40px!important;">
                                    <th>序号</th>
                                    <th>博客名</th>
                                    <th>相关内容</th>
                                    <th>发布时间</th>
                                    <th>更新时间</th>
                                    <th>分类</th>
                                    <th>标签</th>
                                    <th>浏览量</th>
                                    <th>获赞量</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody id="blogTbody">
                                {% for blogObj in blogList %}
                                    <tr id="{{ blogObj.blogId }}"
                                        style="width: 854px!important;height: 40px!important;">
                                        <td>{{ blogObj.id }}</td>
                                        <td>
                                            <a href="{% url 'learningPlanet:index' blog_id=blogObj.blogId %}">{{ blogObj.blogName }}</a>
                                        </td>
                                        <td>
                                            <a href="{% url 'learningPlanet:index' blog_id=blogObj.blogId %}">{{ blogObj.blogSummary }}</a>
                                        </td>
                                        <td>{{ blogObj.blogCreateTime }}</td>
                                        <td>{{ blogObj.blogUpdateTime }}</td>
                                        <td>{{ blogObj.blogCategory }}</td>
                                        <td>{{ blogObj.blogTags }}</td>
                                        <td>{{ blogObj.blogViews }}</td>
                                        <td>{{ blogObj.blogLikes }}</td>
                                        <td>删除</td>
                                    </tr>

                                {% endfor %}
                                </tbody>

                            </table>
                        </div>
                        <div id="blogTable-bottom">
                            <span class="changePageOfBlog" id="pre-0">上一页</span>
                            <span class="changePageOfBlog nextPageOfBlog changePageOfBlogTag" id="next-0">下一页</span>

                        </div>

                    </div>


                    {% comment %}博客表格end{% endcomment %}
                {% else %}
                    <p style="text-indent: 2em;margin-top: 10px;">这里空空如也(<a href="#" id="applyManage2"
                                                                            style="color: #009688!important;">申请为管理员后发布自己的博客</a>)...
                    </p>
                {% endif %}


            </div>
            {% comment %}我的博客end{% endcomment %}


            {% comment %}收藏中心{% endcomment %}
            <div id="collectList" class="functionDiv">

                <div id="collectList-top">
                    <table class="table-bordered" id="collectTable">
                        <caption>收藏中心</caption>
                        <thead>
                        <tr>
                            <th>序号</th>
                            <th>博客名</th>
                            <th>博客作者</th>
                            <th>收藏时间</th>
                            <th>相关内容</th>
                        </tr>
                        </thead>
                        <tbody id="collectTbody">

                        {% for collectObj in collectList %}
                            <tr>
                                <td>{{ collectObj.id }}  </td>
                                <td>
                                    <a href="{% url 'learningPlanet:index' blog_id=collectObj.blogId %}">{{ collectObj.blogName }}</a>
                                </td>
                                <td><a href="#" id="{{ collectObj.blogAuthorId }}"
                                       class="descUser">{{ collectObj.blogAuthor }}</a></td>
                                <td>{{ collectObj.collectTime }}</td>
                                <td style="text-align: left!important;"><a
                                        href="{% url 'learningPlanet:index' blog_id=collectObj.blogId %}">{{ collectObj.summary|safe }}</a>
                                </td>


                            </tr>
                        {% endfor %}


                        </tbody>

                    </table>
                </div>

                <div id="collectList-bottom">

                    <span class="changePageOfCollect" id="pre-0">上一页</span>
                    <span class="changePageOfCollect nextPageOfCollect" id="next-0">下一页</span>

                </div>


            </div>

            {% comment %}收藏中心end{% endcomment %}
            <script>
                var changePageOfCollectDiv = document.getElementsByClassName('changePageOfCollect');
                var changePageOfRandomPenDiv = document.getElementsByClassName('changePageOfRandomPen');
                var changePageOfBlogDiv = document.getElementsByClassName('changePageOfBlog');

                var collectTbody = document.getElementById('collectTbody');
                var randomPenTbody = document.getElementById('randomPenTbody');
                var blogTbody = document.getElementById('blogTbody');

                function changeData(changeWhich, whichTbody, url, whichOne) { //whichOne: 1修改收藏 3修改博客
                    for (var i = 0; i < changeWhich.length; i++) {  //chageWhich:changePageOfCollectDiv
                        changeWhich[i].index = i;//{% comment %}为当前按钮添加索引{% endcomment %}
                        changeWhich[i].onclick = function () {
                            let nowId = changeWhich[this.index].id;
                            let dataLen = whichTbody.getElementsByTagName('tr').length;
                            var demo = RegExp('next', 'ig');//不区分大小写,全局匹配
                            if (nowId === 'pre-0') {
                                popMsg(`<div id="msg-top">提示
            <span class="iconfont close" id="closeMsg">&#xe61a;</span>
        </div><div id="msg-bottom">已经是第一页了~</div>`);


                            } else if (nowId.search(demo) >= 0 && dataLen < 12) { {% comment %}正则匹配{% endcomment %}
                                 popMsg(`<div id="msg-top">提示
            <span class="iconfont close" id="closeMsg">&#xe61a;</span>
        </div><div id="msg-bottom">已是最后一页了</div>`);

                            } else {
                                if (whichOne === 1) {
                                    {% comment %}请求服务器{% endcomment %}
                                    $ajax('post', url, {'nowId': nowId},
                                        function (msg) {
                                            let data = JSON.parse(msg);
                                            let dataList = data['dataList'];

                                            let preId = data['preId'];
                                            let nextId = data['nextId'];
                                            changeWhich[0].id = preId;
                                            changeWhich[1].id = nextId;
                                            let str = ``;
                                            {#添加数据#}
                                            for (var i = 0; i < dataList.length; i++) {
                                                str += `  <tr>
                            <td>${dataList[i].id}</td>
                            <td>
                                <a href="{% url 'learningPlanet:index' blog_id='' %}${dataList[i].blogId}">${dataList[i].blogName}</a>
                            </td>
                            <td><a href="#" id="${dataList[i].blogAuthorId}" class="descUser">${dataList[i].blogAuthor}</a></td>
                            <td>${dataList[i].collectTime}</td>
                            <td style="text-align: left!important;"><a
                                    href="{% url 'learningPlanet:index' blog_id='' %}${dataList[i].blogId}">${dataList[i].summary}</a>
                            </td></tr>`;
                                            }

                                            whichTbody.innerHTML = str;
                                            addDescTag();
                                        },
                                        function (msg) {
                                            popMsg(`<div id="msg-top">提示
            <span class="iconfont close" id="closeMsg">&#xe61a;</span>
        </div><div id="msg-bottom">${JSON.parse(msg)['msg']}</div>`);
                                        }
                                    )
                                }
                                else if (whichOne === 3) {
                                    //修改博客
                                    $ajax('post', url, {'nowId': nowId},
                                        function (msg) {
                                            let data = JSON.parse(msg);
                                            let dataList = data['dataList'];
                                            let preId = data['preId'];
                                            let nextId = data['nextId'];
                                            changeWhich[0].id = preId;
                                            changeWhich[1].id = nextId;
                                            let str = ``;
                                            for (var i = 0; i < dataList.length; i++) {
                                                str += `
                                 <tr id="${dataList[i].id}">
                                <td>${dataList[i].Num}</td>

                                    <td>
         <a href="{% url 'learningPlanet:index' blog_id='' %}${dataList[i].blogId}">${dataList[i].blogName}</a>

                                    </td>
                                    <td>
   <a href="{% url 'learningPlanet:index' blog_id='' %}${dataList[i].blogId}">${dataList[i].blogSummary}</a>
                                    </td>
                                    <td>${dataList[i].blogCreateTime}</td>
                                    <td>${dataList[i].blogUpdateTime}</td>
                                    <td>${dataList[i].blogCategory}</td>
                                    <td>${dataList[i].blogTags}</td>
                                    <td>${dataList[i].blogViews}</td>
                                    <td>${dataList[i].blogLikes}</td>
                                    <td>删除</td>
                                </tr>

`;
                                            }
                                            whichTbody.innerHTML = str;
                                        },
                                        function (msg) {
                                             popMsg(`<div id="msg-top">提示
            <span class="iconfont close" id="closeMsg">&#xe61a;</span>
        </div><div id="msg-bottom">${JSON.parse(msg)['msg']}</div>`);
                                        }
                                    )


                                }


                            }


                        }
                    }
                }


                changeData(changePageOfCollectDiv, collectTbody, {% url 'app:returnCollectList' %}, 1);

                if ('{{ isManager }}' === 'True') {
                    changeData(changePageOfBlogDiv, blogTbody, {% url 'app:returnBlogList' %}, 3);

                    {% comment %}删除博客{% endcomment %}
                    blogTbody.onclick = function (ev) {
                        let e = ev || window.event;
                        let target = e.target || window.event.srcElement;
                        if (target.nodeName.toLowerCase() === 'td' && target.innerText === '删除') {

                            if (confirm('是否确认删除该条博客?')) {
                                target.parentNode.parentNode.removeChild(target.parentNode);
                                $ajax('post', '{% url "app:deleteBlog" %}', {'blogId': target.parentNode.id},
                                    function (msg) {
                                          popMsg(`<div id="msg-top">提示
            <span class="iconfont close" id="closeMsg">&#xe61a;</span>
        </div><div id="msg-bottom">${JSON.parse(msg)['msg']}</div>`);
                                    },
                                    function (msg) {
                                          popMsg(`<div id="msg-top">提示
            <span class="iconfont close" id="closeMsg">&#xe61a;</span>
        </div><div id="msg-bottom">${JSON.parse(msg)['msg']}</div>`);
                                    }
                                )


                            }

                        }

                    }

                }


            </script>
            <script>

                {% comment %}搜索自己的博客{% endcomment %}
                let blogSearch = document.getElementById('blogSearch');
                let bu = blogSearch.getElementsByTagName('span')[0];
                let keyword = blogSearch.getElementsByTagName('input')[0];

                function searchBlog() {
                    let keywords = blogSearch.getElementsByTagName('input')[0].value;

                    if (keywords.length > 0) {
                        $ajax('post', '{% url "learningPlanet:search" %}',
                            {
                                'keyword': keywords,
                                'blogerId': '{{ userId }}'
                            },
                            function (msg) {
                                let dataList = JSON.parse(msg)['data'];
                                let str = ``;
                                for (var i = 0; i < dataList.length; i++) {

                                    str += `  <tr id="${dataList[i]['blogId']}">
                <td>${dataList[i]['id']}</td>
                <td>
                    <a href="{% url 'learningPlanet:index' blog_id='' %}${dataList[i]['blogId']}">${dataList[i]['title']}</a>
                </td>
                <td>
                    <a href="{% url 'learningPlanet:index' blog_id='' %}${dataList[i]['blogId']}">${dataList[i]['summary']}</a>
                </td>
                <td>${dataList[i]['createdTime']}</td>
                <td>${dataList[i]['updateTime']}</td>
                <td>${dataList[i]['category']}</td>
                <td>${dataList[i]['tags']}</td>
                <td>${dataList[i]['views']}</td>
                <td>${dataList[i]['likes']}</td>
                <td>删除</td>
            </tr>`;
                                }
                                let blogTbody = document.getElementById('blogTbody');
                                blogTbody.innerHTML = str;
                                keyword.value='';
                                keyword.placeholder=`搜索到${dataList.length}篇,关键词:${keywords}`;

                            },
                            function (msg) {
                                 popMsg(`<div id="msg-top">提示
            <span class="iconfont close" id="closeMsg">&#xe61a;</span>
        </div><div id="msg-bottom">${JSON.parse(msg)['msg']}</div>`);
                            }
                        )
                    }
                }

                keyword.onkeyup = function (e) {
                    keynum = window.event ? e.keyCode : e.which;
                    if (parseInt(keynum) === 13) {
                        searchBlog();
                    }}
                    bu.onclick = function () {

                        searchBlog();
                    }
                    {% comment %}搜索自己的博客end{% endcomment %}

            </script>


            {% comment %}后台管理(身份是管理员才会显示){% endcomment %}
            {% comment %}仅我一人可以看到这个功能栏{% endcomment %}
            {% if isManager %}
                {% if userId == '1' %}
                    <div id="manageTable" class="functionDiv">
                        <div id="manageTable-top">

                            <span class="manageTableChoices">授权管理</span>
                            <span class="manageTableChoices" id="buttonbackData1">后台月统计</span>
                            <span class="manageTableChoices" id="buttonbackData2">后台年统计</span>
                            <span class="manageTableChoices">登录Admin</span>

                        </div>
                        <div id="manageTable-bottom">

                            <div class="manageYableFunc" id="grant" style="overflow: auto;">

                                <table class="table-bordered">

                                    <thead>

                                    <tr>
                                        <th>序号</th>
                                        <th>用户名</th>
                                        <th>身份</th>
                                        <th>手机</th>
                                        <th>注册日期</th>
                                        <th>博客数量</th>
                                        <th>操作</th>
                                    </tr>

                                    </thead>
                                    <tbody id="grantTbody">

                                    {% for userObj in userList %}
                                        <tr>
                                            <td>{{ userObj.userNum }}</td>
                                            <td><a href="#" class="descUser"
                                                   id="{{ userObj.userId }}">{{ userObj.username }}</a></td>
                                            <td>
                                                {% if userObj.userId == 1 %}
                                                    管理员
                                                {% else %}
                                                    <select id="{{ userObj.username }}LLL{{ userObj.userId }}"
                                                            class="degreeSelectList">
                                                        <option selected="selected">{{ userObj.degree }}</option>
                                                        <option>普通用户</option>
                                                        <option>管理员</option>
                                                    </select>

                                                {% endif %}

                                            </td>
                                            <td>{{ userObj.mobile }}</td>
                                            <td>{{ userObj.joinTime }}</td>
                                            <td>{{ userObj.blogNum }}</td>
                                            {% if userObj.userId == 1 %}
                                                <td></td>
                                            {% else %}
                                                <td class="deleteUser" id="{{ userObj.userId }}">删除</td>
                                            {% endif %}

                                        </tr>
                                    {% endfor %}

                                    <script>

                                        {% comment %}授权身份{% endcomment %}
                                        let degreeSelectList = document.getElementsByClassName('degreeSelectList');
                                        for (var i = 0; i < degreeSelectList.length; i++) {
                                            degreeSelectList[i].onchange = function () {
                                                let name_id = this.id.split('LLL');
                                                let username = name_id[0];
                                                let id = name_id[1];
                                                if (confirm(`是否确认将用户:${username}重新授权为:${this.value}?`)) {

                                                    $ajax('post', '{% url "app:grantUser" %}', {
                                                            'userId': id,
                                                            'degree': this.value
                                                        },
                                                        function (msg) {
                                                              popMsg(`<div id="msg-top">提示
            <span class="iconfont close" id="closeMsg">&#xe61a;</span>
        </div><div id="msg-bottom">${JSON.parse(msg)['msg']}</div>`);
                                                        }, function (msg) {
                                                              popMsg(`<div id="msg-top">提示
            <span class="iconfont close" id="closeMsg">&#xe61a;</span>
        </div><div id="msg-bottom">${JSON.parse(msg)['msg']}</div>`);
                                                        }
                                                    )

                                                }
                                            }
                                        }

                                        {% comment %}删除用户{% endcomment %}
                                        let deleteUserList = document.getElementsByClassName('deleteUser');
                                        for (var i = 0; i < deleteUserList.length; i++) {
                                            deleteUserList[i].onclick = function () {
                                                let userId = this.id;
                                                if (confirm('是否确认删除此用户的所有信息?')) {
                                                    this.parentNode.parentNode.removeChild(this.parentNode);


                                                    $ajax('post', '{% url "app:deleteUser" %}', {'userId': userId},
                                                        function (msg) {

                                                        }, function (msg) {
                                                             popMsg(`<div id="msg-top">提示
            <span class="iconfont close" id="closeMsg">&#xe61a;</span>
        </div><div id="msg-bottom">${JSON.parse(msg)['msg']}</div>`);
                                                        }
                                                    )

                                                }
                                            }
                                        }

                                    </script>
                                    </tbody>
                                </table>
                            </div>
                            <div class="manageYableFunc" id="backData1">
                            </div>
                            <div class="manageYableFunc" id="backData2">
                            </div>
                            <script>
                                let buttonbackData1 = document.getElementById('buttonbackData1');
                                let buttonbackData2 = document.getElementById('buttonbackData2');

                                function askData(whichOne) {
                                    $ajax('post', '{% url "log:returnPicture" %}', {'whichOne': whichOne},
                                        function (msg) {
                                            let data = JSON.parse(msg);
                                            let backShowTable = document.getElementById(`backData${whichOne}`);
                                            backShowTable.innerHTML = data['div'];
                                            let scriptTag = document.createElement('script');
                                            if (whichOne === 1) {
                                                scriptTag.src = '{% static "js/demo1.js" %}';

                                            } else {
                                                scriptTag.src = '{% static "js/demo2.js" %}';
                                            }
                                            document.body.appendChild(scriptTag);
                                            document.body.removeChild(scriptTag);

                                        },
                                        function (msg) {
                                             popMsg(`<div id="msg-top">提示
            <span class="iconfont close" id="closeMsg">&#xe61a;</span>
        </div><div id="msg-bottom">${JSON.parse(msg)['msg']}</div>`);
                                        }
                                    )
                                }

                                buttonbackData1.addEventListener('click', function () {
                                    askData(1)
                                }, false);
                                buttonbackData2.addEventListener('click', function () {
                                    askData(2)
                                }, false);
                            </script>
                            <div class="manageYableFunc" id="Admin" style="padding: 5px;color:#009688!important;"><a
                                    href="{% url 'app:index' %}admin/">登录Admin</a></div>


                        </div>


                    </div>

                {% endif %}


            {% endif %}

            {% comment %}后台管理end{% endcomment %}

            {% comment %}通知{% endcomment %}
            <div id="message" class="functionDiv" style="padding: 5px;">
                <div id="message-top">
                    <span class="messageTableChoices">未读通知</span>
                    <span class="messageTableChoices">已读通知</span>

                </div>
                <div id="message-bottom" style="overflow-y: auto">
                    <div class="messageableFunc">

                        {% for messageObj in messageUnreadList %}
                            <div class="messageNo" id="{{ messageObj.messageId }}">

                                {% if messageObj.nobody %}
                                    <div class="messageNo-top"><span>发件人:{{ messageObj.senderName }}</span>
                                        <span>时间:{{ messageObj.sendTime }}</span></div>
                                {% else %}
                                    <div class="messageNo-top"><span>发件人: <a href="#" class="descUser"
                                                                             id="{{ messageObj.senderId }}"
                                                                             style="color: #009688!important;">{{ messageObj.senderName }}</a> </span>
                                        <span>时间:{{ messageObj.sendTime }}</span></div>
                                {% endif %}

                                <div class="messageNo-bottom">{{ messageObj.content|safe }}</div>
                            </div>
                        {% endfor %}


                    </div>
                    <div class="messageableFunc">
                        {% for messageObj in messageReadList %}
                            <div class="messageNo" id="{{ messageObj.messageId }}">

                                {% if messageObj.nobody %}
                                    <div class="messageNo-top"><span>发件人:{{ messageObj.senderName }}</span>
                                        <span>时间:{{ messageObj.sendTime }}</span></div>
                                {% else %}
                                    <div class="messageNo-top"><span>发件人: <a href="#" class="descUser"
                                                                             id="{{ messageObj.senderId }}"
                                                                             style="color: #009688!important;">{{ messageObj.senderName }}</a> </span>
                                        <span>时间:{{ messageObj.sendTime }}</span></div>
                                {% endif %}

                                <div class="messageNo-bottom">{{ messageObj.content|safe }}</div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
            {% comment %}通知end{% endcomment %}

            {% comment %}更多{% endcomment %}
            <div id="more" class="functionDiv" style="padding: 5px;">敬请期待...</div>
            {% comment %}更多end{% endcomment %}


        </div>
        {% comment %}内容框end{% endcomment %}

        <script>
            let choiceTableList = document.getElementsByClassName('choiceTable');
            let FuncList = document.getElementsByClassName('functionDiv');

            let manageChoiceTableList = document.getElementsByClassName('manageTableChoices');
            let manageFuncList = document.getElementsByClassName('manageYableFunc');

            let messageTableChoicesList = document.getElementsByClassName('messageTableChoices');
            var messageFuncList = document.getElementsByClassName('messageableFunc');
            var unReadNum = document.getElementById('unReadNum');

            function choiceToFunc(choiceTableList, FuncList) {
                for (let i = 0; i < choiceTableList.length; i++) {

                    {% comment %}未选中的背景颜色为透明{% endcomment %}
                    choiceTableList[i].onclick = function () {
                        for (let m = 0; m < choiceTableList.length; m++) {
                            choiceTableList[m].style.backgroundColor = 'transparent';
                        }

                        {% comment %}鼠标移入时的特效{% endcomment %}
                        for (let k = 0; k < FuncList.length; k++) {
                            FuncList[k].style.display = 'none';
                            choiceTableList[k].onmousemove = function () {
                                choiceTableList[k].style.backgroundColor = 'rgba(255, 255, 255, 0.2)';
                            }

                            {% comment %}鼠标移出时的特效{% endcomment %}
                            choiceTableList[k].onmouseleave = function () {
                                if (k === i) {
                                } else {
                                    choiceTableList[k].style.backgroundColor = 'transparent';
                                }
                            }
                        }

                        {% comment %}被选中的背景色为白色{% endcomment %}
                        choiceTableList[i].style.backgroundColor = 'rgba(255, 255, 255, 0.2)';
                        FuncList[i].style.display = 'block';
                    }
                }
            }

            {% comment %}点击按钮显示对应的功能框{% endcomment %}
            choiceToFunc(choiceTableList, FuncList);
            choiceToFunc(manageChoiceTableList, manageFuncList);
            choiceToFunc(messageTableChoicesList, messageFuncList);

            {% comment %}请求通知信息{% endcomment %}

            function askMessageData(whichOne) {
                $ajax('post', '{% url "app:returnMessageData" %}', {'userId':{{userId}}, 'isRead': whichOne},
                    function (msg) {
                        var dataList = JSON.parse(msg)['data'];

                        if (whichOne === 0) {
                            unReadNum.innerHTML = dataList.length;

                            if (unReadNum.innerHTML === '0') {
                                unReadNum.style.display = 'none';
                            } else {
                                unReadNum.style.display = 'inlineBlock';
                            }
                        }

                        let str = ``;
                        for (var i = 0; i < dataList.length; i++) {
                            let userDiv = '';
                            if (dataList[i]['nobody']) {
                                userDiv = `<span>发件人:${dataList[i]['senderName']}</span>`
                            } else {
                                userDiv = `<span>发件人: <a href="#" class="descUser"
                                                                             id="${dataList[i].senderId}"
                                                                             style="color: #009688!important;">${dataList[i]['senderName']}</a> </span>`;
                            }

                            str += `<div class="messageNo" id="${dataList[i]['messageId']}"> <div class="messageNo-top">${userDiv}
                                        <span>时间:${dataList[i]['sendTime']}</span></div>
                                        <div class="messageNo-bottom">${dataList[i]['content']}</div></div>`;
                        }

                        messageFuncList[whichOne].innerHTML = str;
                        addDescTag();
                        {% comment %}重新获取用户信息{% endcomment %}

                    },
                    function () {
                          popMsg(`<div id="msg-top">提示
            <span class="iconfont close" id="closeMsg">&#xe61a;</span>
        </div><div id="msg-bottom">请求失败!</div>`);
                    }
                )
            }

            for (var i = 0; i < messageTableChoicesList.length; i++) {
                messageTableChoicesList[i].index = i;
                messageTableChoicesList[i].addEventListener('click', function () {
                    askMessageData(this.index);
                }, false);
            }

            function operateMsg(ev, title, operator, url, reduceOne) {
                let e = ev || window.event;
                var target = e.target || window.event.srcElement;
                let targetClassName = target.className.toLowerCase();
                if (targetClassName === 'messageno-bottom') {
                    let messageId = target.parentNode.id;
                    {% comment %}当前通知的id{% endcomment %}
                    let messageContent = target.innerHTML;
                    let str = `<div id="msg-top">${title}
            <span class="iconfont close" id="closeMsg">&#xe61a;</span>
        </div><div id="msg-bottom">
          <div class="messagee">${messageContent}</div>
  <div id="markMessage">${operator}</div>
            </div></div>`;
                    popMsg(str);


                    {% comment %}标记为已读{% endcomment %}
                    let markMessage = document.getElementById('markMessage');
                    markMessage.onclick = function () {
                        $ajax('post', url,
                            {'messageId': messageId},
                            function () {
                                target.parentNode.parentNode.removeChild(target.parentNode);
                                markMessage.parentNode.parentNode.parentNode.removeChild(markMessage.parentNode.parentNode);

                                if (reduceOne === 1) {
                                    unReadNum.innerHTML = parseInt(unReadNum.innerHTML) - 1;
                                    if (unReadNum.innerHTML === '0') {
                                        unReadNum.style.display = 'none';
                                    } else {
                                        unReadNum.style.display = 'inlineBlock';

                                    }
                                }

                            },
                            function () {
                                popMsg(`<div id="msg-top">提示
            <span class="iconfont close" id="closeMsg">&#xe61a;</span>
        </div><div id="msg-bottom">操作失败!</div>`);
                            }
                        )
                    }
                }
            }

            {% comment %}点击显示短信的具体内容{% endcomment %}
            messageFuncList[0].onclick = function (ev) {    {% comment %}未读的短信{% endcomment %}
                operateMsg(ev, '通知内容', '标记为已读', '{% url "app:markMessage" %}', 1);
            }
            messageFuncList[1].onclick = function (ev) {    {% comment %}已读的短信{% endcomment %}
                operateMsg(ev, '通知内容', '删除', '{% url "app:deleteMessage" %}', 1);
            }
        </script>
    </div>
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>



{% endblock %}